<template>
  <view class="qr-code-box" v-if="text">
    <!-- <canvas
      type="2d"
      canvas-id="qr-code-box"
      style="width: 160px; height: 160px; margin: 0 auto"
    />  -->
    <image
      @click="priveImg"
      style="width: 160px; height: 160px; margin: 0 auto"
      :src="qrcodeURL"
    />
    <!-- 二维码预览窗口 -->
    <view v-if="isShowBrCode" @click="closeCode" class="pre-img">
      <image
        style="width: 200px; height: 200px; margin: 0 auto"
        :src="qrcodeURL"
      />
    </view>
  </view>
</template>

<script>
import { drawImg } from "./weapp-qrcode";
export default {
  data() {
    return {
      isShowBrCode: false,
      qrcodeURL: "",
    };
  },
  props: {
    text: {
      type: String,
      default: () => "",
    },
  },
  methods: {
    priveImg() {
      this.isShowBrCode = true;
    },
    closeCode() {
      this.isShowBrCode = false;
    },
  },
  mounted() {
    console.log(this.text);
    this.qrcodeURL = drawImg(this.text, {
      typeNumber: 4, // 密度
      errorCorrectLevel: "L", // 纠错等级
      // size: 800,              // 白色边框
    });
  },
};
</script>

<style lang="scss" scoped>
.qr-code-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pre-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}
</style>
